For the past couple of days, I have been interested in writing small simple web apps with Mithril. This is the second project (after Marker), and for this one, I decided to write a Hacker News interface for the browser.

I have actually made a similiar one, but for the command line, using Go and charm. So I thought it would be fun to try writing an app with similiar function for the browser.

Ok, here we go!

For the reader, you can try out Lipu at here.

List of things to do

• [x] Good-looking UI
• [x] About page
• [x] Shortened version of the URL of the submission
• [x] Show time of the submission
• [ ] Pages
  • [x] Show user which page they are on
  • [x] Next pages
  • [x] Previous pages
  • [ ] Specific pages (using query string)
• [ ] Date (not sure if possible)
  • [ ] Go back to a specific date
  • [ ] Go back a day, month, year, etc.
• [x] Add other types of submissions to the nav bar
• [x] Submissions
  • [x] Top
  • [x] New
  • [x] Ask
  • [x] Show
• [x] Host the website (on Vercel)
• [ ] PWA

Day 1 (21/03/2022)

After a about 30 minutes of pain and brainstorming, I have finally find a way to fetch and render all the submissions correctly! Yay!

I start with just bare-bone HTML, no CSS yet. It looks pretty basic, but it is a good start for me.

I also found out a mind-blowing thing (not really) that I could have used in the CLI one if I dig the documentation of the HN API a bit more: You can fetch the top stories of the day just from the Firebase database alone.

When I work on the CLI client, I fetch the top submissions by scraping the whole website and use a jQuery-like library. If I know this, I would have same a huge amount of time from fixing problems with usernames placed in the wrong submission.

Well, the more you know.

Day 2 (22/03/2022)

Some big UI upgrades today.

Now, there is no need to fetch submissions from click the button. There is an About page to let people know about my little project. And the website is decorated with a classical font and a simple (but beautiful) style, thanks to Water.css.

Also the submissions are loaded as the page loads, which I think is pretty cool.

I have also added a nav bar to add other types of submissions in the future, and for possibly other things.

The website now loads 30 submissions (instead of 25).

Overall, the app is now prettier and more functional today.

Day 3 (23/03/2022)

Today I'm a bit lazy, so only Page-realated (Next and Prev) are implemented.

I also added a feature where the website will show the pages that the user is currently in. It may come in handy for the user.

I have changed the name of the project from Lukin to Lipu, because Lipu means text; document in Toki Pona, which makes more sense than Lukin (means eye; looking).

Day 4 (24/03/2022)

Today I am trying to get dates for submissions to work. Most of the time it gets just 1 hour away from the time shown on HN, so I think that's pretty good.

I also want to add some more information other than just x hours ago, so I added the exact time the post was posted. Like this:

At 1:16 AM (8 hours ago)

Sometimes it overshoots the time to something like x days, which is ridiculous considering most top HN submissions are just a few hours ago. Like this one. At the time of writing, it was submitted 1 hour ago, but on my page, it says 2 days. Sometimes the date of the submission shown on Lipu are shifted forward by 1-2 hours from the original submission.

I don't know why this is happening. The same also seems to happen when I developed Chaker (the CLI one). Maybe it's just a timezone problem, IDK.

I have also added the small hostname URL feature like in HN.

I have added more types of submissions, which is easier than I think it is.

Lipu on a small screen:

Day 5 (25/03/2022)

After Lunch

After about an hour of pain and suffer, I have finally managed to upload Marker (one of my older project) to Vercel. Now I know what to do to upload Lipu to Vercel.

I have done pretty much nothing today (yet), due to my school switching from studying at afternoon to morning, which I think is better, because I have way more free time at afternoon.

I have also added ESLint and size-limit to help me understand more about my project. Due to this (and having to install ESBuild locally to bundle the project), there are a whole lot more dependencies in node_modules than before, so maybe I cannot use the Small feature line in the about text now.