dat-ecosystem website_timeline_page

[Mehrabbruno]

#70

todo

• update the timeline_page_web_v0.0.1
  • @input 📦 buttons_v0.0.1 dat-ecosystem website_buttons #71
  • @input 📦 original_banner_v0.0.2 from dat-ecosystem website_original_banner #84
  • @input 📦 filter_options_v.0.0.1 from dat-ecosystem website_filter_options #89
  • @input 📦 projects_card_v.0.0.4 from dat-ecosystem website_projects_cards #74
  • @input 📦 pagination_v.0.0.1 from dat-ecosystem website_pagination #97
  • @input 📦 footer_v0.0.3 from dat-ecosystem website_footer #75
  • @input 📦 terminal_frame_v0.0.2 from dat-ecosystem website_terminal_frame #86
  • @input 📦 course_card_v.0.0.1 from dat-ecosystem website_course_card #102
  • add the terminal frame
  • add original banner with
    • title of 'Timeline'
    • desc of 'Explore our community events, history, and courses to learn more about how Dat began as a community-driven effort for distributed data synchronization.'
  • add filter options
  • add course cards
  • add pagination
  • add a footer
  • add tasks, record videos etc
  • @output 📦 timeline_page_web_v0.0.2 from comment

---

• update the timeline_page_web_v0.0.2
  • @input 📦 timeline_page_web_v0.0.2
  • update the select dropdown design
  • read feedback
  • add tasks, record videos etc
    • @output 📦 timeline_page_web_v0.0.3 from comment

---

• update the timeline_page_web_v0.0.3
  • @input 📦 timeline_page_web_v0.0.3
  • read feedback
  • add slider for timeline navigation
  • add tasks, record videos etc
    • @output 📦 timeline_page_web_v0.0.4 from comment

---

• update the timeline_page_web_v0.0.4
  • @input 📦 timeline_page_web_v0.0.4
  • read feedback
  • add slider for timeline navigation
  • add dropdown for date selection
  • add title for timeline cards
  • add tasks, record videos etc
    • @output 📦 timeline_page_web_v0.0.5 from comment

---

• update the timeline_page_web_v0.0.5
  • @input 📦 timeline_page_web_v0.0.5
  • read feedback
  • modify the drop down
  • modify the header positions/ page layout
  • record worklog and update tasks
  • @output 📦 timeline_page_web_v0.0.6 from comment

---

• update the timeline_page_web_v0.0.6
  • @input 📦 timeline_page_web_v0.0.6
  • read feedback
  • move the filter bar to the bottom
  • make the whole page more compact
  • update the date select/filter option
  • record worklog and update tasks
  • @output 📦 timeline_page_web_v0.0.7 from comment

---

• update the timeline_page_web_v0.0.7
  • @input 📦 [timeline_page_web_v0.0.7](https://www.figma.com/file/1zBxgchAmrDGw2FDzu7uxX/dat-ecosystem-website?node-id=1275-4949&t=If4neK4QfpiquEnl-4
  • read feedback
  • update the filter bar
  • add a grid
  • add a search toggle
  • @output 📦 timeline_page_web_v0.0.8 from comment

---

• update the timeline_page_web_v0.0.8
  • @input 📦 filter_option_v0.0.2 from dat-ecosystem website_filter_options #89
  • @input 📦 timeline_page_web_v0.0.8
  • read feedback
  • update the UI to retro design
  • record worklog, task etc
  • @output 📦 timeline_page_web_v0.0.9 from comment

---

• update the timeline_page_web_v0.0.9
  • @input 📦 timeline_page_web_v0.0.9
  • read feedback
  • add the banner cover and footer
  • apply the changes based on provided feedback
  • record worklog, task etc
  • @output 📦 timeline_page_web_v0.0.10 from comment

---

• update the timeline_page_web_v0.0.10
  • @input 📦 timeline_page_web_v0.0.10
  • update UI using a 30x30px grid
  • @output 📦 timeline_page_web_v0.0.11 from comment

---

• update the timeline_page_web_v0.0.11
  • @input 📦 timeline_page_web_v0.0.11
  • add gap between timeline cards
  • increase the calendar date sizes
  • add a scrollbar under the calendar
  • @output 📦 timeline_page_web_v0.0.12 from comment

---

• update the timeline_page_web_v0.0.12
  • @input 📦 timeline_page_web_v0.0.12
  • update the calendar grid size
  • add a window bar on the timeline
  • @output 📦 timeline_page_web_v0.0.13 from comment

[Mehrabbruno]

tasks

• update the timeline_page_web_v0.0.1 - 24min
  • add the terminal frame
  • add original banner with
    • title of 'Timeline'
    • desc of 'Explore our community events, history, and courses to learn more about how Dat began as a community-driven effort for distributed data synchronization.'
  • add filter options
  • add course cards
  • add pagination
  • add a footer
  • add tasks, record videos etc - 23min
    • @output 📦 timeline_page_web_v0.0.2

---

worklog

worklog-109

---

feedback

---

proposals

[serapath]

feedback 2023.02.01

The timeline design looks nice, but i think the current website makes more sense in terms of structure, so that a timeline really feels like a timeline and timeline entires have more space.

The timeline content is already on the page but probably needs to contain many more entries than the relatively few listed there yet. Each of those entries is already tagged with a tag, but can potentially tagged by multiple different tags, which makes it possible to filter.

Now regarding filters/search/etc... that part is great, because it is missing, so that's pretty cool that you added that. Overall we want a lot of content to fit into the timeline page and use endless scrolling, whcih probably automatically navigates the pagination too.

The header on this particular page could maybe be skipped or be minimal to immediately see the timeline content instead, almost like a visual news feed (not rss, but we will offer that too, or rather a json feed).

I like the structure of the card, it lacks the tags though and a section for attached/relevant links and generally (but we didn't have that yet), an option to show a project logo, because each timeline item can be related to one of the projects in the ecosystem.

https://dat-ecosystem.org/timeline.html

[Mehrabbruno]

tasks

• update the timeline_page_web_v0.0.2 - 1h12min
  • update the select dropdown design
  • read feedback - 6min
  • add tasks, record videos etc - 34min
    • @output 📦 timeline_page_web_v0.0.3

---

worklog

worklog-110
worklog-111
worklog-112

---

feedback

---

proposals

[serapath]

feedback 2023.02.14

general

the menu bar is awesome, please don't change it again :-)
just try moving it down - we can also let user preferences decide once implemented, but let's keep going towards implementation. so what you did so far is great (it is also easy when implemented to move it up again and check how it works compared to on top). Maybe it will be down on mobile and up on desktop, we will see, but overall it's great.

terminal would expand/collapse from the menu bar and do in short what i wrote in the previous feedback comment. it's ok if it is simple.

components

+1 for buttons and stuff. yes we keep it. lovely you did that :-)
Can't tell you what is finalized and what not.
i love the way it's going, just if we could move a bit faster would be lovely.
you could invoice us for a lot more each month by putting in more hours.

3d vis

yeah, think of a retro style computer. i think i shared some pinterst or pictures of that and maybe you can check those again. if you think a window box with a frame/border is good enough, ...maybe, let's just integrate it somehow and for now just use a "screenshot" of the visualization in figma. Once we have the real thing, we can go and update, but might be AFTER we have the implementation.

You mention the entire screen is the monitor.
Maybe we can keep it like that, so then it just needs buttons to:

1. maximize it (take the full monitor)
2. go fullscreen (like what you can do on website with F11)
3. go webXR immersion mode if you happen to have a 3D virtual reality headset.

---

consortium page

you pronounced that perfectly by the way.
https://en.wikipedia.org/wiki/Consortium
otherwise, phase is pronounced "fase", anyway, never mind, just because you mentioned it

otherwise sounds good - looking forward to the next worklog.
hopefully more and sooner. if you can put in more hours more often i'd be happy.
we are really a bit behind schedule now with this project and falling further behind atm.

timeline

1. Seeing your feedback. The timeline banner is ok as is.
2. Logos in the banner hexagon grid only on the project page, not timeline.
3. Let's get towards implementing components.
4. +1 for toggle tags dropdown

The timeline is mostly about "history" (=what happened in the past)
But while the oldest entry is from 2011 or 2013
The latest entry will be from now, so it also serves as "news"
Because it is "history" and "news", we called it "timeline"

---

+1 for first re-using davids design, but your new timeline is better

• the "icon" in each post represents the ecosystem project logo that entry is related to
• maybe details like tag icons and more tags as david shows can be copied
• if entries lack content, maybe don't do full width, or use tag based background banners?
• our blog for example has a blog post background, see https://blog.dat-ecosystem.org/

+1 for infinite scroll, but we still need a quick way of jumping through time or even sharing a link to scroll to a specific spot in the timeline to not lose that feature of pagination when using infinite scroll. Maybe an old scool scroll bar? ...but how to bookmark/jump to specific entries?

If you have a good idea how to still make it easy for people to see the timeline, what comes after what, even when you have a 2-3 column grid, then please, do, it saves space, which is great - i just felt maybe people will find it difficult to make sense of the order of time.

But while we can add those, what you have feels great so lets focus on getting towards implementing. it's getting urgent.

---

growth program

Sorry for not making things clearer earlier. It is true davids design does not express it well. He just added a picture of a road a bit disconnected from the rest instead of turning the page into that roadmap (which is just meant to show a journey/path, rather garden/nature or retro computing than cars/street) ...but sadly he didn't do that back then.

The roadmap picture needs to become the page, but it shouldn't be a roadm, more like a p2p garden journey? ...

Yes we need a merging or splitting or rearranging or whatever you wanna call it :-)
...all of that together one list divided into stages and laid out along a p2p garden journey.

yes - maybe like the timeline, one after the other, with a CTA for each stage, but maybe we can make the design more retro computing interesting, maybe some gardening motives, being creative while fitting the theme... ...maybe hexagons to show the stage - lets see

All the elements on the current design you have and david made and even the current page have are "aspects" of that "growth journey path" we want and that has many stages, so quite some major re-ordering of the content has to be done to place all the curernt information where it belongs under that new perspective.

for example:

• p2p garden benefits section => needs to be split to show relevant parts in each stage
• how to qualify => needs to be split to show relevnat parts in each stage
• p2p projects (basically also benefits) => needs to be split to show relevant parts in each stage
• ... etc ...

It's true that many CTA's are missing.
So, in each "phase/stage/..." of the "funnel/path/journey/..." needs to have one, and:

• list projects in that STAGE
• a CTA to apply for that STAGE
• requirements for that STAGE
• benefits/results/outcomes of that STAGE
• infos around that STAGE
• etc...

Maybe we need the path/journey that stretechs out through the whole scrollable page.
But we also need a "STAGE DESIGN" (like a standardized card or something) but a bit different for each stage, beginner vs intermediate vs... expert, etc...

So that we do not need any other elements on the page, because the path itself is basically showing it.

future outlook:
in the far future, not now, we hope we can even "merge" the 3D visualization with the growth program, to layout all projects in 3D along such a growth program and visualize the state of the ecosystem in this way, just to share where we want to ideally end up in the future - this is just one iteration towards that more long term goal and many things have to be build and figured out and established first to get there (so for now growth program page and ecosystem projects page stay seperated)

Here is a pinterest link.
https://www.pinterest.co.uk/serapath/process-phases/
If the entire growth program page can and should be arrange around a page filling continuous path? ....maybe a garden, maybe in a retro computer look, something funky and fitting?
It's maybe a bit challenging to organise all information around that path, but I think it can be done.
Perfect success was if there is only that path and every aspect of the growth program is structured around that and stations or entries or "milestones" (maye more in a gardening and/or retro computing theme) around that journey or path.

here are some more ideas how "garden" and "retro computer graphics" might fit in:

• example1
• example2
• example3
• example4
• example5
• example6
• example7
• example8
• example9
• example0

[Mehrabbruno]

Tasks

• update the timeline_page_web_v0.0.3 - 56min
  • read feedback - 14min
  • add slider for timeline navigation
  • add tasks, record videos etc - 15min
  • @output 📦 timeline_page_web_v0.0.4

---

worklog

worklog-113

---

feedback

---

proposals

[serapath]

feedback 2023.02.18

---

timeline page

it loooks nice, but we will get a lot more news in the future once we source
all the updates from all the projects on a more "real time" basis...

also i tried on my phone to use it swiping an imaginary timeline left/right
to see post flying up/down feld counter intuitive.
i think a vertical timline (e.g. think vscode code minimap)
which scrolls faster than the code, makes more sense.
actually on mobile chat/tiktok/insta/... swiping up/down makes more sense
also users expect this from the mouse scroll wheel to be most convenient
ppl tried horizontal timelines, but while they are interesting,
none of the mainstream apps does that anymore.

for navigation:

1. i think in a long timeline, nothing beats autocomplete typing a date/title
2. a specific post should allow to copy the link that scrolls to it directly
3. otherwise, filtering by date/tags/etc.. to reduce the list works too

main inspiration (but of course in our retro computing style)

1. gmail in compact mode (if you use gmail, check)
2. github newsfeed (when you are logged in and go to github.com)
3. github notifications view
4. etc...

check the links below for inspiration. go through all of them.
there are cool unique aspects in each of them and we can try to take the best

• github planning roadmap
• bloomberg news feed
• terminal news feed1
• terminal news feed2
• terminal news feed3
• terminal news feed4
• terminal news feed5
• github feed1
• github news feed
• github feed2
• github feed3
• hackernews feed
• activity feed
• sanity notifications
• github notifications1
• github notifications2
• github notifications3
• github notifications4
• gmail inbox compact1

The timeline should be able to switch to caldendar mode in the future too!

• basically just showing it all like google calendar does instead of a timeline.
• The timeline might in the future also show upcoming/pending entries on top

Basically, it should more look & feel like a tool, less like a gimmicky presentation page

If you have accounts and are logged in, you can check with your own profile too:

• https://github.com/notifications
• https://github.com/ (but logged in)
• https://mail.google.com (compact mode)

(all the above only works well if you have lots of mails/notifications/feed)

[Mehrabbruno]

tasks

• update the timeline_page_web_v0.0.4 - 57min
  • read feedback - 6min
  • add slider for timeline navigation
  • add dropdown for date selection
  • add title for timeline cards
  • add tasks, record videos etc - 5min
  • @output 📦 timeline_page_web_v0.0.5

---

worklog

worklog-115

---

feedback

---

proposals

[serapath]

feedback 2023.02.27

Please add another for multiselect/filter based on project(s).
Each timline entry is related to a project and can have multiple tags in addition.
Tags dropdown exists, but not yet for projects.

The dropdown is a good idea. This dropdown works.

1. I like the detailed white timeline, once things get very long (e.g. we already have history since 2013), it might be hard to see things in a very high resolution.10 years x 12 months x 30 days, that will be a very tiny font or low resolution.

2. Also, i like the Feb/2023 label on the right, because they are big and readable and the current date in the white timeline is bold but still not readable enough.

3. Also, i like the dropdown idea - which could be an autocomplete field to jump to a date.

Could the white timeline be what happens when the user opens the dropdown?
COuld the currently selected date be changing while the user scrolls and selects in the dropdown, but have it as bold as the Feb/2023 entry? ...and when the dropdown is collapes, it doesnt show that scrollbar, or maybe on fast scrolling the dropdown auto-expands?

Also it might not hurt to have separators in the main view based on years or month.
Just like on discord there are those date based seperator lines in chats to show the beginning of a new day for example.

[Mehrabbruno]

tasks

• update the timeline_page_web_v0.0.5 - 21min
  • read feedback - 6min
  • modify the drop down
  • modify the header positions/ page layout
  • record worklog and update tasks - 11min
  • @output 📦 timeline_page_web_v0.0.6

---

worklog

worklog-121

---

feedback

---

proposals

[serapath]

feedback 2023.03.09`

top menu bar buttons show "home" instead of "timeline" and also the original "dat banner with hexagons" is not visible.

---

basic concept

Let's turn every main menu tab, in this case also timeline, where we have a custom layout, that is not a typical desktop/icons/windows thing, into a software program/tool/app instead, so in this case it is the timeline reader program or timeline viewer program which the user sees or opens when they click on timeline.

Hmm, maybe that is a misunderstanding, but we now have time/date indicators 3 times.

1. in the dropdown menu
2. on the left next to the cards
3. on the right in the long scrollbar

I'd like to merge them all into one, e.g. either on the right or left.

1. The current date could be bigger/bolder/colored to indicate things like currently on the left.
2. But it could also be the bigger/bolder/colored indicator date in a long list of dates like the list currently on the left
3. maybe the date currently on the left is clickable and opens like a dropdown
   • but that dropdown, when open, looks like the long date scrollbar on the left
   • you can switch back and forth to toggle/collapse/expand it
4. when the fat big date indicator currently on the right is clicked or tabbed in focus, a user might also autocomplete type to jump to a specific date.

Lastly, to keep it all a bit more retro meaning, maybe things should be more compact, e.g.

• compact retro desktop ui

timeline

so yes, it is totally cool and that's basically what i just tried to describe.
your scrollbar works, but it includes months, which makes it a lot longer.
if we do it github style, we can decide to use seperator lines or patterns or whatever to indicate not just days, but group them into days/weeks too.

so putting an icon there to toggle the scrollbar (which you say should be there by default),
is cool, but that is exactly what the date dropdown should be... but instead of a date dropdown, it is a scrollbar dropdown or scrollbar expand/collapse.
we can be a bit weird and crazy, because it's retro anyway :-)
people did crazy shit back in the days.
as long as it makes some sense and is understandable and usable, it's ok.

we don't have to literally copy github 1:1
Years are long. dat-ecosystem exists since 2013, that's just 10 numbers.
There is no need for so much whitespace between years, so you can fit a lot of years.
if it ever gets too many, scrolling years is not a big deal.
The grid on top then shows 365 days which can be colored based on whether there are news entries or not. if we use pixel mono fonts and monochrome low color palette, we can probably make it look quite retro

In the case of scrolling through the dropdown scroll bar, the scrolling would first cause some indicator on the 365 days menu to move, until we get to the last day of the year, which is when also the dropdown scroll bar jumps to the next year and then you scroll again through the 1-365 days... for example...
clicking on a year jumps to the beginning of that year where the user could then scroll the main section or click/jump through the 365 days field.

I think it is overkill to maybe have it at all, think about it:

1. we have a date on each timeline entry so we basically know where we are
2. we have the date marked in the scrollbar on the side
3. we have a date in the dropdown menu
4. and we have the big fat date of what date is currently selected.

again - i'd like to follow a DRY approach (dont repeat yourself) and make things compact and try a retro minimalism design. This is currently way too much time/date stuff :-)

By the way, if we use the github timeline for days and combine it with a yearly scroll bar, i would not mind if we then put the status/filter/search as a sticky bar on the bottom.

Some have calendars and UI but fill the entire screen and have menus on the bottom

You could think of the entire timeline page with date selector github style that is scrollable as some sort of "timeline program" and when a user opens it, we can have some search/filter actions on the bottom as a sticky bar ...the content of the calendar area can scroll to show the data for example.

Because it is a program and we should do it on every page like that, a user could click to close it.

retro

I agree regarding the pixelated fonts and some other aspects that could be "more retro".
But:

• it is monochrome in colors
• it has high contrast (like ancient retro normally has because of small color palette)
• it uses a ascii character border and basically text only UI.

That is pretty retro to me.

This is not an effect. It is here, but back in the days, systems had 4-8 or max 16 colors in their pallette. These day it's millions or more than you can even distinguish with your eyes, but not back then, so if a photo was taken and should be shown, you literally had to use the few colors available and render the picture, so a tehcnique called dithering was invented to generate those. Today you would of course call that an "effect" or "filter", but back then it was the only way to show pictures at all.

Also, ascii and subtle repeating pixel patterns where massively used to structure the UI.

[Mehrabbruno]

tasks

• update the timeline_page_web_v0.0.6 - 1h13min
  • read feedback
  • move the filter bar to the bottom
  • make the whole page more compact
  • update the date select/filter option
  • record worklog and update tasks - 28min
  • @output 📦 timeline_page_web_v0.0.7

---

worklog

worklog-123
worklog-124

---

feedback

---

proposals

[serapath]

feedback 2023.03.21

+1 amazing improvement :-)

Do you think the small scrollbar on the side could be "always" visible and scrolling updates the date in the collapsed dropdown? ...but when clicking the collapsed dropdown, it "enhances" the scrollbar with the dates?

otherwise perfect :-)
love it. i think we can keep it.
bottom menu bar is amazing and looks nicely retro.

Also, thx again for mentioning

Regarding scrollbar, i think we should collapse responsively into single column on mobile or small screens so maybe we dont need it here.

Also i like your idea of having a little icon to open/collapse the bottom menu bar.
Makes sense to me.

Also the timeline scroller menu is awesome.
I made some comments about "scroll bars" on the terminal issue, but otherwise i love it and think we can keep it. looks really nice and retro 🚀 🚀 🚀 🚀

That is very important to have on every page when launching.
We might in some months down the line or whatever... change that and maybe not have it on every page, but everything changed upside down inside out, so it is literally the only thing that keeps the connection to the history of dat since 2013 visually, so thanks for mentioning that again :-)

Also regarding the menubar

I agree the info button needs a different color, but i think quick access to all "socials" is preferable. ...maybe we can give the info button an additional color or put it on the left end of the menubar instead? :-)

Or if we put it in the right end of the menu bar, we can move the terminal to the left end of the menubar instead (e.g. in front of all the menu buttons) ?

---

github

Hm, one thing though. don't underestimate the amount of "news" we will be tracking.
Sure, there will be more "major" events, but the idea is that we will even pull in events from every single project in the dat ecosystem and show a combined timeline, so at some point this can amount to 5-10 news item per day.
It will include e.g. "worklogs", like the one we are having every time you post a worklog.
But instead of just ours, there will be 10-20 projects ...next to all the other activity.
It is also the reason why we have filters, to show only certain type of news from only certain type of projects to not be overwhelmed.

But without nice tooling it will be pretty tought to follow news and what's going on.

The main reason why we do not yet have so many events and entries is because we don't have yet the automated tooling and pull-in of news items across projects, so it is all manual work and thus you see a lot less entries for now, but that is meant to change in the near future and somehow we should prepare for that :-)
I guess 30+ per month, but it will get to a lot more the more projects join, maybe it will get to 100+ a month at some point down the road.

but we need to do it in a super retro way :P ..so if, then our grid should look a lot more retro. 7x52 pixels grid or grid of squares ...maybe stretched over the full screen width?
or squished into a nice additional bar where it shows some stats or whatever on the left or right side of that grid?

maybe it can be optional? on the bottom or top ...so it only shows up when the user expands it? ...not sure, but having just a long list of news items alone does not give a good overview to see when there was more or less activity per project.

Also an additional searchbar for dates isn't too bad, but maybe we can re-use existing search bar and just select an action or switch the mode to search or whatever.
I would recommend to take some inspiration from the chrome devtools console and all it's elements, but it has to look retro of course :-)

If you press CTRL+F in chrome devtools you get an additional search in the terminal to mark log entries in the console, which is different from the devtools console top search/filter, which is hiding all log entries that don't match instead of marking anything.

Next to is it has some additional side menu and options - but we need it all in retro.

Also, the date: fed/2023 field itself, when clicked, could not just expand/collapse the dropup dates "scrollbar", but also turn into an "autocomplete input search field" iteself, so we don't need an additional search field

[Mehrabbruno]

Tasks - 2023.03.29

• update the timeline_page_web_v0.0.7 - 1h27min
  • read feedback - 14min
  • update the filter bar
  • add a grid
  • add a search toggle
  • updated previous work on contract - 29min
  • record work log and update task - 16min
  • @output 📦 timeline_page_web_v0.0.8

---

Worklog

worklog-126

---

Feedback

---

Proposals

[serapath]

feedback 2023.03.29

Pretty good the way it is.

But let's just drop the search dropup entirely
This is too confusing, lets just have a searchbar with nothing else for now.

Still, the "github grid" and the dropup dates are both time related.
The grid has 12 month and that is what we should maybe indicate.
And the button to open the grid was moved next to the date.
The date dropup does only need years, because the months and days are in the grid.
The scrollbar culd have 2 small arrows on the bottom.

Overall, i like it, but if you checked the terminal feedback, just make sure that this screen will fit the same style :-)

Also as you can see, i tried a bit with the highlight/focus color.