Show HN: Built a timeline component for React with multiple layout modes | Hacker News Reader

Show HN: Built a timeline component for React with multiple layout modes

github.com

269 pointsprabhuignoto56 comments

I don't know much about React, but I look at projects on github all the time and you nailed everything here. Demo right up front, well organized & well written docs, tests passing.

Fantastic job!

thank you

Great job - your timeline widget looks really neat. I look forward to seeing how it develops in future.

For your interest, there is a small group of hobbyist developers and small companies developing timeline products for the web.

As the developer of ChronoFlo Timeline Maker (https://www.chronoflotimeline.com), I welcome you to the timeline maker community!

Good luck with your project.

thank you. chronoflotimline is pretty sweet.

I CANNOT believe this. This is EXACTLY what I was looking for. I tried making one of these last week and it's practically impossible

thanks for your response. please give it a try and let me know how it works out for you

The accessibility of this leaves a lot to be desired:

- There are no landmarks.

- The keyboard navigation works poorly.

- There are no live regions to show changing content.

- The markup is a sea of divs and spans, so there is no structure to the content.

- There is no visible focus indicator.

Some of the advanced layouts do not work at all in Safari, accessible or otherwise.

thanks for your response.

The project is still actively under development and accessiblity is something not yet fully implemented but the goal is to get there eventually very quickly. I have not advertised as fully accessible.

Can you clarify a bit more on the keyboard navigation working poorly. may be logging a issue on the repo would help me to solve it quickly.

as for problems in safari, i use a windows laptop and i haven't got the opportunity to test on safari thoroughly. But this will be looked into on high priority.

I understand the importance of accessibility (obviously) but I've see that there is a whole community whose first response to anything new is "what about..." as if its unthinkable that you would build a V0 without considering every possible special interest. I think everyone if pulled up by progress, and building something new, even if it doesnt work for everyone out of the gate is still a step in the right direction that will eventually lift everyone up. So don't worry about the "what about..." people, they want to bring everybody down

Detailed criticism is meant to bring people up, not down. There are better web communities if the only thing you want to get is encouragements (not that encouragement is bad, but it's way cheaper than criticism). It's your choice to see the critique as "this is a roadblock", or "this could be a good roadmap item".

thank you

Why so negative?

Accessibility shouldn't be an afterthought. It really needs to be baked in from the start.

agree with you. accessibility will be looked into on high priority.

At the same time, this is not public infrastructure. This is a gift to you.

If someone gives you a broken gift you should tell them so they can return it to be mended..

If someone gives you a gift you think is broken, you ask them to empower you to help mend it. And if they offer to get it mended, you at least offer to go with them.

That said, yes accessibility should be prioritized.

That's not how it works with stuff people made personally.

Unfortunately, people often file lawsuits over lack of accessibility (at least in the US).

Nothing in that list was "negative". They were all dry factual statements. Tone policing people for being "negative" when they're not is in and of itself quite a negative thing.

Seriously? The very first line was negative:

"leaves a lot to be desired"

If you don't want to be considered a jerk, in polite company you would say something like "This is a nice project. I have a few suggestions and bugs regarding accessibility:"

> Some of the advanced layouts do not work at all in Safari

To be fair, a lot of simple stuff doesn't work on Safari. I recently noticed that Graylog's static navbar is broken on Safari, and only on Safari.

I use Safari because it offers great battery life but I don't expect it to work well everywhere, it sucks as a browser.

I'll keep an eye on this for the responsive feature that's planned!

I recently implemented a timeline on the https://wavy.fm front page to communicate that the website is still in development. Trying to make it responsive with flexbox was an absolute nightmare, so I ended up using JS to render the component differently on mobile.

thanks for the response. yes the responsive part is on the works and will be coming to the component very soon.

I expected `tree` to allow multiple side by side (but still synced) timelines. For instance in your examples there'd be one line for European ops, and another for Japanese. Any plans to add that?

I think `tree` is a bit confusing for what is essentially still linear vertical diagram. You can imagine you could have a layout with actual branches.

Agreed. Would renaming it vertical-split or vertical-alternating reduce confusion?

Vertical-alternating seems very clear to me. Also consider allowing vertical-alternating to “compact“. Reducing blank space may be of value for some designs.

agree, the mode need to be renamed. tree can be misleading. suggestions are welcome

vertical alternating?

sounds good to me.

The ability to click and drag the timeline to scroll through it would be an excellent addition!

sure thanks for your feedback. yes i will plan to add this for next major update.

I've wanted something like this for a while, but it's missing what to me is the most important feature: scaling the distance between entries based on the length of time between them.

Thanks for making this. I am hoping this is responsive.

making it fully responsive currently in the works. thanks

Is it possible to zoom out? It's hard to place events relatively to each other if you can only see 2-3 on the screen at a time.

no zoom feature at the moment.

Looks great, lots of presentation options and whatnot, but I was missing the ability to scroll on desktop.

no scroll at the moment. but both scroll and touch actions will be added in the next major update.

Nice! Many years ago I built something like that as my first JS project. Oh the days.

thanks

I just don't understand why every JavaScript project uses emojis so much

It helps format the text if your writing a long piece of manual for example.

Sure you can break it up with capital letters, bold but it gets boring and dull. Adding emoji's adds a bit of toybox excitement.

If they are used correctly, it can make a document more appealing. When not then it makes the page look ghastly.

I love your documentation.

Small thing: Your "Built with" links at the bottom are broken.

fixed this now. thanks for letting me know.

Thanks for sharing it, I will try to use this soon to display an Event agenda.

sure please do let me know how it works out. thanks

This is really cool! Does it support printing or converting to pdf well?

no printing options yet. thanks

This excellent! Thank you this. Love it.

thank you

Super clean very good work

thank you

your profile link at the bottom of the page is a 404

Must be a slow day on HN

Reply on news.ycombinator.com