Re:Show HN: My Hacker News clone (redesigned)
by alpaca128 on Saturday May 08, 2021 @04:15PM
(#27090299)
The important bit with imitating a site like HN is not imitating the UI...but the UX. I don't visit this site for the page layout but because it loads 10x faster than every site trying to copy it. Don't implement loading animations, when the site is fast enough you won't see them anyway.
So basically the trick is to take a site like the new reddit.com, looking at it very carefully and then doing everything the opposite way.
Re:Show HN: My Hacker News clone (redesigned)
by andrewzah on Saturday May 08, 2021 @08:57PM
(#27092204)
Why do so many HN redesigns completely miss the boat?
HN loads very fast, and scanning the list of posts is very fast. The information-dense design is important. On my phone, on the original site, I see 8 posts by default. On this redesign, I see 2.
Every single HN redesign I’ve seen makes it slower and less information dense. And sometimes requires JavaScript to work at all. Why?
Re:Show HN: My Hacker News clone (redesigned)
by karmakaze on Saturday May 08, 2021 @11:00PM
(#27092827)
Most of my devices don't notice page load times.
Information density it really what it's all about. The very idea of HN is high signal-to-noise. Don't confuse text density with information density though.
If I visit HN twice in one day, or even once each on consecutive days, I'll see the same stories there. Of course if not there I might miss a top headline if I go a day without a visit. My solution[0] was to only show today's stories. For yesterday's, click the page title. It also segments into categories based on some regexes.
I don't mean to hijack this post. The design is quite different and may suit some readers. I was only giving an example of information density which happens to save me a lot of time to see that there's nothing new since the last time I visited.
Re:Show HN: My Hacker News clone (redesigned)
by dusanJon on Saturday May 08, 2021 @03:21PM
(#27089936)
Hi everyone,
I've made this Hacker news clone just recently using their official Firebase Api.
It's completely client-side rendered using React JS, with no additional libraries or add-ons (used useContext hook for partial state management), except that I used React Router for app routing.
As for the styling goes, I've used vanilla CSS and tried to keep the UI as simple as I could, and to stay away from looking too flashy, with little or no animations at all. I added the dark mode for easy night time reading.
So basically the trick is to take a site like the new reddit.com, looking at it very carefully and then doing everything the opposite way.
(I think the overall design is fine though)
HN loads very fast, and scanning the list of posts is very fast. The information-dense design is important. On my phone, on the original site, I see 8 posts by default. On this redesign, I see 2.
Every single HN redesign I’ve seen makes it slower and less information dense. And sometimes requires JavaScript to work at all. Why?
Information density it really what it's all about. The very idea of HN is high signal-to-noise. Don't confuse text density with information density though.
If I visit HN twice in one day, or even once each on consecutive days, I'll see the same stories there. Of course if not there I might miss a top headline if I go a day without a visit. My solution[0] was to only show today's stories. For yesterday's, click the page title. It also segments into categories based on some regexes.
I don't mean to hijack this post. The design is quite different and may suit some readers. I was only giving an example of information density which happens to save me a lot of time to see that there's nothing new since the last time I visited.
[0] https://hackerer.news
It's completely client-side rendered using React JS, with no additional libraries or add-ons (used useContext hook for partial state management), except that I used React Router for app routing.
As for the styling goes, I've used vanilla CSS and tried to keep the UI as simple as I could, and to stay away from looking too flashy, with little or no animations at all. I added the dark mode for easy night time reading.
Let me know what you guys think about it :)