[HN Gopher] Show HN: Built a timeline component for React with m...
___________________________________________________________________
Show HN: Built a timeline component for React with multiple layout
modes
Author : prabhuignoto
Score : 192 points
Date : 2020-10-23 14:33 UTC (8 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| waterside81 wrote:
| 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!
| prabhuignoto wrote:
| thank you
| jaequery wrote:
| Must be a slow day on HN
| gherkinnn wrote:
| Nice! Many years ago I built something like that as my first JS
| project. Oh the days.
| zbq wrote:
| 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
| prabhuignoto wrote:
| thanks for your response. please give it a try and let me know
| how it works out for you
| alexkearns wrote:
| 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.
| prabhuignoto wrote:
| thank you. chronoflotimline is pretty sweet.
| momothereal wrote:
| 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.
| prabhuignoto wrote:
| thanks for the response. yes the responsive part is on the
| works and will be coming to the component very soon.
| piercebot wrote:
| The ability to click and drag the timeline to scroll through it
| would be an excellent addition!
| prabhuignoto wrote:
| sure thanks for your feedback. yes i will plan to add this for
| next major update.
| justinph wrote:
| 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.
| prabhuignoto wrote:
| 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.
| rasapetter wrote:
| Why so negative?
| onion2k wrote:
| Accessibility shouldn't be an afterthought. It really needs
| to be baked in from the start.
| emteycz wrote:
| At the same time, this is not public infrastructure. This
| is a gift to you.
| prabhuignoto wrote:
| agree with you. accessibility will be looked into on high
| priority.
| akeck wrote:
| Unfortunately, people often file lawsuits over lack of
| accessibility (at least in the US).
| phailhaus wrote:
| 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.
| prabhuignoto wrote:
| no zoom feature at the moment.
| Piisamirotta wrote:
| I just don't understand why every JavaScript project uses emojis
| so much
| doublerabbit wrote:
| 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.
| YourMatt wrote:
| I love your documentation.
|
| Small thing: Your "Built with" links at the bottom are
| broken.
| prabhuignoto wrote:
| fixed this now. thanks for letting me know.
| OliverGilan wrote:
| Super clean very good work
| prabhuignoto wrote:
| thank you
| Tossrock wrote:
| 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.
| nakovet wrote:
| Thanks for sharing it, I will try to use this soon to display an
| Event agenda.
| prabhuignoto wrote:
| sure please do let me know how it works out. thanks
| asadlionpk wrote:
| Thanks for making this. I am hoping this is responsive.
| prabhuignoto wrote:
| making it fully responsive currently in the works. thanks
| jakear wrote:
| 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?
| prabhuignoto wrote:
| agree, the mode need to be renamed. tree can be misleading.
| suggestions are welcome
| xixixao wrote:
| 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.
| positivejam wrote:
| Agreed. Would renaming it vertical-split or vertical-
| alternating reduce confusion?
| alanning wrote:
| Vertical-alternating seems very clear to me. Also consider
| allowing vertical-alternating to "compact". Reducing blank
| space may be of value for some designs.
| jaquers wrote:
| Looks great, lots of presentation options and whatnot, but I was
| missing the ability to scroll on desktop.
| prabhuignoto wrote:
| no scroll at the moment. but both scroll and touch actions will
| be added in the next major update.
___________________________________________________________________
(page generated 2020-10-23 23:00 UTC)