Been trying this out secretly for the past few weeks — a "catch-up" timeline page. Did whole bunch of iterations, where I myself is the guinea pig, but this time reaching a point where I just got to share it out in the public.
- NOT final design, still very experimental, only on my local machine
- Instead of algo timeline, this is focused on data-grid-like UI for configuring exactly what I want to see.
- This honestly could be another full-fledged app/client by itself 🫠
Product-1st Front-end Engineer, based in Singapore. On a (long) career break since July 2022. Working on a Mastodon web client https://phanpy.social @phanpy
Why follow me: I have interests in #WebDev, #design, #DataViz, #Maps, #PublicTransport, #stickers & #anime. I usually post about my side projects, tech events, weird discoveries, and sometimes local news.
#fedi22 tfr #tech #JavaScript
","url":"https://mastodon.social/@cheeaun","uri":"https://mastodon.social/users/cheeaun","avatar":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_static":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_description":"Chee Aun wearing a black beyond tellerrand (2015 design) t-shirt","header":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_static":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_description":"Orange background with a white “ca” symbol inside a circular logo.","followers_count":3581,"following_count":711,"statuses_count":5204,"last_status_at":"2026-04-20","hide_collections":false,"show_media":true,"show_media_replies":true,"show_featured":true,"noindex":false,"emojis":[{"shortcode":"catjam","url":"https://files.mastodon.social/custom_emojis/images/000/224/097/original/d9c5e447581399a9.gif","static_url":"https://files.mastodon.social/custom_emojis/images/000/224/097/static/d9c5e447581399a9.png","visible_in_picker":true}],"roles":[],"fields":[{"name":"Projects","value":"https://cheeaun.com/projects","verified_at":null},{"name":"GitHub","value":"https://github.com/cheeaun","verified_at":"2023-02-02T01:49:24.451+00:00"},{"name":":thinking_face: :catjam:","value":"🤔 🐱 [TEST :thinking_face: :catjam: ]","verified_at":null}]},"media_attachments":[{"id":"111896223328815606","type":"gifv","url":"https://files.mastodon.social/media_attachments/files/111/896/223/328/815/606/original/c5a211e9de5c7a75.mp4","preview_url":"https://files.mastodon.social/media_attachments/files/111/896/223/328/815/606/small/c5a211e9de5c7a75.png","remote_url":null,"preview_remote_url":null,"text_url":null,"meta":{"original":{"width":576,"height":360,"frame_rate":"43866000/731831","duration":40.658,"bitrate":565885},"small":{"width":576,"height":360,"size":"576x360","aspect":1.6}},"description":"Demo of Catch-up page where it shows the Home/Following timeline with configurable filters and sort options.","blurhash":"UCRMb%D*sqoz-;oyWVa{~qadNGaK_3RjWBoe"}],"mentions":[],"tags":[{"name":"mastodon","url":"https://mastodon.social/tags/mastodon"}],"emojis":[],"tagged_collections":[],"quote":null,"card":null,"poll":null,"quote_approval":{"automatic":[],"manual":[],"current_user":"denied"}},{"id":"111896240249744973","created_at":"2024-02-08T14:05:26.856Z","in_reply_to_id":"111896223599048036","in_reply_to_account_id":"42049","sensitive":false,"spoiler_text":"","visibility":"public","language":"en","uri":"https://mastodon.social/users/cheeaun/statuses/111896240249744973","url":"https://mastodon.social/@cheeaun/111896240249744973","replies_count":4,"reblogs_count":6,"favourites_count":38,"quotes_count":0,"edited_at":null,"content":"Here's the screen *before* this. Specify how long back I want to fetch the Home timeline posts.
","reblog":null,"application":{"name":"Phanpy","website":"https://phanpy.social"},"account":{"id":"42049","username":"cheeaun","acct":"cheeaun","display_name":"Chee Aun 🤔","locked":false,"bot":false,"discoverable":true,"indexable":true,"group":false,"created_at":"2017-04-04T00:00:00.000Z","note":"Product-1st Front-end Engineer, based in Singapore. On a (long) career break since July 2022. Working on a Mastodon web client https://phanpy.social @phanpy
Why follow me: I have interests in #WebDev, #design, #DataViz, #Maps, #PublicTransport, #stickers & #anime. I usually post about my side projects, tech events, weird discoveries, and sometimes local news.
#fedi22 tfr #tech #JavaScript
","url":"https://mastodon.social/@cheeaun","uri":"https://mastodon.social/users/cheeaun","avatar":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_static":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_description":"Chee Aun wearing a black beyond tellerrand (2015 design) t-shirt","header":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_static":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_description":"Orange background with a white “ca” symbol inside a circular logo.","followers_count":3581,"following_count":711,"statuses_count":5204,"last_status_at":"2026-04-20","hide_collections":false,"show_media":true,"show_media_replies":true,"show_featured":true,"noindex":false,"emojis":[{"shortcode":"catjam","url":"https://files.mastodon.social/custom_emojis/images/000/224/097/original/d9c5e447581399a9.gif","static_url":"https://files.mastodon.social/custom_emojis/images/000/224/097/static/d9c5e447581399a9.png","visible_in_picker":true}],"roles":[],"fields":[{"name":"Projects","value":"https://cheeaun.com/projects","verified_at":null},{"name":"GitHub","value":"https://github.com/cheeaun","verified_at":"2023-02-02T01:49:24.451+00:00"},{"name":":thinking_face: :catjam:","value":"🤔 🐱 [TEST :thinking_face: :catjam: ]","verified_at":null}]},"media_attachments":[{"id":"111896240080691454","type":"gifv","url":"https://files.mastodon.social/media_attachments/files/111/896/240/080/691/454/original/44e9dc721da87709.mp4","preview_url":"https://files.mastodon.social/media_attachments/files/111/896/240/080/691/454/small/44e9dc721da87709.png","remote_url":null,"preview_remote_url":null,"text_url":null,"meta":{"original":{"width":576,"height":360,"frame_rate":"1055000/17601","duration":14.081,"bitrate":378970},"small":{"width":576,"height":360,"size":"576x360","aspect":1.6}},"description":"Catch-up page showing a form to show post from how many hours back.","blurhash":"UBSPX}xs_1R-?aWWRkoe~URkD+t69It5xWRk"}],"mentions":[],"tags":[],"emojis":[],"tagged_collections":[],"quote":null,"card":null,"poll":null,"quote_approval":{"automatic":[],"manual":[],"current_user":"denied"}},{"id":"111961266244615549","created_at":"2024-02-20T01:42:24.798Z","in_reply_to_id":"111896240249744973","in_reply_to_account_id":"42049","sensitive":false,"spoiler_text":"","visibility":"public","language":"en","uri":"https://mastodon.social/users/cheeaun/statuses/111961266244615549","url":"https://mastodon.social/@cheeaun/111961266244615549","replies_count":5,"reblogs_count":18,"favourites_count":54,"quotes_count":0,"edited_at":null,"content":"After a while, my usage slowly leaning towards this: grouping by authors. Feels refreshing browsing it this way. Faster to scan too.
Oh yeah, this is how it looks like on wider viewport. Kinda email-like.
#PhanpySocialDev #sneakpeek (not available on dev site yet)
","reblog":null,"application":{"name":"Phanpy","website":"https://phanpy.social"},"account":{"id":"42049","username":"cheeaun","acct":"cheeaun","display_name":"Chee Aun 🤔","locked":false,"bot":false,"discoverable":true,"indexable":true,"group":false,"created_at":"2017-04-04T00:00:00.000Z","note":"Product-1st Front-end Engineer, based in Singapore. On a (long) career break since July 2022. Working on a Mastodon web client https://phanpy.social @phanpy
Why follow me: I have interests in #WebDev, #design, #DataViz, #Maps, #PublicTransport, #stickers & #anime. I usually post about my side projects, tech events, weird discoveries, and sometimes local news.
#fedi22 tfr #tech #JavaScript
","url":"https://mastodon.social/@cheeaun","uri":"https://mastodon.social/users/cheeaun","avatar":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_static":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_description":"Chee Aun wearing a black beyond tellerrand (2015 design) t-shirt","header":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_static":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_description":"Orange background with a white “ca” symbol inside a circular logo.","followers_count":3581,"following_count":711,"statuses_count":5204,"last_status_at":"2026-04-20","hide_collections":false,"show_media":true,"show_media_replies":true,"show_featured":true,"noindex":false,"emojis":[{"shortcode":"catjam","url":"https://files.mastodon.social/custom_emojis/images/000/224/097/original/d9c5e447581399a9.gif","static_url":"https://files.mastodon.social/custom_emojis/images/000/224/097/static/d9c5e447581399a9.png","visible_in_picker":true}],"roles":[],"fields":[{"name":"Projects","value":"https://cheeaun.com/projects","verified_at":null},{"name":"GitHub","value":"https://github.com/cheeaun","verified_at":"2023-02-02T01:49:24.451+00:00"},{"name":":thinking_face: :catjam:","value":"🤔 🐱 [TEST :thinking_face: :catjam: ]","verified_at":null}]},"media_attachments":[{"id":"111961266085713236","type":"gifv","url":"https://files.mastodon.social/media_attachments/files/111/961/266/085/713/236/original/ac4236cf7b92ab67.mp4","preview_url":"https://files.mastodon.social/media_attachments/files/111/961/266/085/713/236/small/ac4236cf7b92ab67.png","remote_url":null,"preview_remote_url":null,"text_url":null,"meta":{"original":{"width":508,"height":360,"frame_rate":"42360000/1434349","duration":47.812,"bitrate":536932},"small":{"width":508,"height":360,"size":"508x360","aspect":1.4111111111111112}},"description":"Demo of Catch-up timeline on Phanpy, showing all posts by multiple authors, grouped by authors.","blurhash":"UJP??ss;~qM{g4WBD%t7x]WBM{fRxuWBxuWC"}],"mentions":[],"tags":[{"name":"phanpysocialdev","url":"https://mastodon.social/tags/phanpysocialdev"},{"name":"sneakpeek","url":"https://mastodon.social/tags/sneakpeek"}],"emojis":[],"tagged_collections":[],"quote":null,"card":null,"poll":null,"quote_approval":{"automatic":[],"manual":[],"current_user":"denied"}}],"descendants":[{"id":"111961927256185068","created_at":"2024-02-20T04:30:31.035Z","in_reply_to_id":"111961898235377446","in_reply_to_account_id":"109259207144483733","sensitive":false,"spoiler_text":"","visibility":"unlisted","language":"en","uri":"https://mastodon.social/users/cheeaun/statuses/111961927256185068","url":"https://mastodon.social/@cheeaun/111961927256185068","replies_count":0,"reblogs_count":0,"favourites_count":4,"quotes_count":0,"edited_at":null,"content":"@box464 it's another page on Phanpy. I'm only using it when waking up in the morning to catch up on posts during sleep.
I'm fine for anyone else taking this idea further and build their own app. It's almost like building a full-fledge data analytics platform so the usage and discovery patterns are endless.
","reblog":null,"application":{"name":"Phanpy","website":"https://phanpy.social"},"account":{"id":"42049","username":"cheeaun","acct":"cheeaun","display_name":"Chee Aun 🤔","locked":false,"bot":false,"discoverable":true,"indexable":true,"group":false,"created_at":"2017-04-04T00:00:00.000Z","note":"Product-1st Front-end Engineer, based in Singapore. On a (long) career break since July 2022. Working on a Mastodon web client https://phanpy.social @phanpy
Why follow me: I have interests in #WebDev, #design, #DataViz, #Maps, #PublicTransport, #stickers & #anime. I usually post about my side projects, tech events, weird discoveries, and sometimes local news.
#fedi22 tfr #tech #JavaScript
","url":"https://mastodon.social/@cheeaun","uri":"https://mastodon.social/users/cheeaun","avatar":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_static":"https://files.mastodon.social/accounts/avatars/000/042/049/original/574ed7bfacb54cba.jpeg","avatar_description":"Chee Aun wearing a black beyond tellerrand (2015 design) t-shirt","header":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_static":"https://files.mastodon.social/accounts/headers/000/042/049/original/8f9b8bb3ee1a8063.jpg","header_description":"Orange background with a white “ca” symbol inside a circular logo.","followers_count":3581,"following_count":711,"statuses_count":5204,"last_status_at":"2026-04-20","hide_collections":false,"show_media":true,"show_media_replies":true,"show_featured":true,"noindex":false,"emojis":[{"shortcode":"catjam","url":"https://files.mastodon.social/custom_emojis/images/000/224/097/original/d9c5e447581399a9.gif","static_url":"https://files.mastodon.social/custom_emojis/images/000/224/097/static/d9c5e447581399a9.png","visible_in_picker":true}],"roles":[],"fields":[{"name":"Projects","value":"https://cheeaun.com/projects","verified_at":null},{"name":"GitHub","value":"https://github.com/cheeaun","verified_at":"2023-02-02T01:49:24.451+00:00"},{"name":":thinking_face: :catjam:","value":"🤔 🐱 [TEST :thinking_face: :catjam: ]","verified_at":null}]},"media_attachments":[],"mentions":[{"id":"109259207144483733","username":"box464","url":"https://mastodon.social/@box464","acct":"box464"}],"tags":[],"emojis":[],"tagged_collections":[],"quote":null,"card":null,"poll":null,"quote_approval":{"automatic":[],"manual":[],"current_user":"denied"}}]}