8 ms·
Show HN: Built a timeline component for React with multiple layout modes
- momothereal 6y agoI'll keep an eye on this for the responsive feature that's planned! I recently implemented a timeline on the https://wavy.fm 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.
- prabhuignoto 6y agothanks for the response. yes the responsive part is on the works and will be coming to the component very soon.
- piercebot 6y agoThe ability to click and drag the timeline to scroll through it would be an excellent addition!
- prabhuignoto 6y agosure thanks for your feedback. yes i will plan to add this for next major update.
- nakovet 6y agoThanks for sharing it, I will try to use this soon to display an Event agenda.
- prabhuignoto 6y agosure please do let me know how it works out. thanks
- jakear 6y agoI 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?
- xixixao 6y agoI 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.
- positivejam 6y agoAgreed. Would renaming it vertical-split or vertical-alternating reduce confusion?
- alanning 6y agoVertical-alternating seems very clear to me. Also consider allowing vertical-alternating to “compact“. Reducing blank space may be of value for some designs.
- prabhuignoto 6y agoagree, the mode need to be renamed. tree can be misleading. suggestions are welcome
- framecowbird 6y agovertical alternating?
- prabhuignoto 6y agosounds good to me.
- alexkearns 6y agoGreat 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 https://www.chronoflotimeline.com), I welcome you to the timeline maker community! Good luck with your project.
- prabhuignoto 6y agothank you. chronoflotimline is pretty sweet.
- zbq 6y agoI CANNOT believe this. This is EXACTLY what I was looking for. I tried making one of these last week and it's practically impossible
- prabhuignoto 6y agothanks for your response. please give it a try and let me know how it works out for you
- Tossrock 6y agoI'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.
- phailhaus 6y agoIs 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.
- prabhuignoto 6y agono zoom feature at the moment.
- OliverGilan 6y agoSuper clean very good work
- prabhuignoto 6y agothank you
- asadlionpk 6y agoThanks for making this. I am hoping this is responsive.
- prabhuignoto 6y agomaking it fully responsive currently in the works. thanks
- waterside81 6y agoI 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!
- prabhuignoto 6y agothank you
- justinph 6y agoThe 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.
- prabhuignoto 6y agothanks 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.
- mdifrgechd 6y agoI 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
- leppr 6y agoDetailed 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".
- prabhuignoto 6y ago
- Piisamirotta 6y agoI just don't understand why every JavaScript project uses emojis so much
- doublerabbit 6y agoIt 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.
- YourMatt 6y agoI love your documentation. Small thing: Your "Built with" links at the bottom are broken.
- prabhuignoto 6y agofixed this now. thanks for letting me know.
- jaequery 6y agoMust be a slow day on HN
- jaquers 6y agoLooks great, lots of presentation options and whatnot, but I was missing the ability to scroll on desktop.
- prabhuignoto 6y agono scroll at the moment. but both scroll and touch actions will be added in the next major update.
- gherkinnn 6y agoNice! Many years ago I built something like that as my first JS project. Oh the days.
- prabhuignoto 6y agothanks
- naderkhalil 6y agoThis is really cool! Does it support printing or converting to pdf well?
- prabhuignoto 6y agono printing options yet. thanks
- vikashkoushik 6y agoThis excellent! Thank you this. Love it.
- prabhuignoto 6y agothank you
- naeemnur 6y agoyour profile link at the bottom of the page is a 404