cheeaun / hackerweb

A simply readable Hacker News web app

HackerWeb

A simply readable Hacker News web app. http://hackerwebapp.com/

About

This project started as one of my silly mini-projects. I create this initially to try out iOS 5+ Mobile Safari's new -webkit-overflow-scrolling: touch CSS support. I need some sort of content for scrolling, so why not Hacker News' stories? I'm also trying something called Fake it 'til you make it which I make the web app looks (and feels) like a native mobile app. In this case, like a native iOS app. If the web app is loaded on non-iOS devices, it'll switch to the 'web' theme which is like a generic theme for other browsers and platforms.

Read my two-part blog post on how I built this web app:

• How I built the Hacker News mobile web app (HN thread)
• How I built the Hacker News mobile web app, Part 2 (HN thread)

Also read my introductory post, Introducing HackerWeb.

Technical stuff

This web app works best on iOS 5+ Mobile Safari (iOS theme) and other modern browsers (web theme). It uses these wonderful scripts:

• Hogan.js - logic-less templating
• Amplify.Store - client-side storage
• ruto.js - location.hash router
• iOS
  • Tappable - touch-friendly tap events
  • Tween.js - simple tweening engine
• Web
  • ibento.js - simple event delegation
  • classList.js - shim for element.classList
• Vanilla JavaScript - everything else

Also uses the unofficial Hacker News API.

Development stuff

Prerequisites

git clone git://github.com/cheeaun/hackerweb.git
cd hackerweb/
npm install

Grunt tasks

• grunt templates - Compile templates in templates/* to generate assets/js/templates.js

• grunt uglify - Concat and minify JavaScript files in assets/js/* to generate js/*

• grunt watch - Watch the templates and scripts, run templates and uglify tasks when they're changed

• grunt embedImage - Embed images into CSS files. This will parse CSS files in assets/css/* and change this (any lines with url()):

   background-image: url(PATH); /* embedImages:url(PATH) */
  

  ... into this:

   background-image: url(data:DATAURI); /* embedImages:url(PATH) */
  

• grunt connect - Run a local dev server. Arguments:

  • --port=XX - specify a custom port number

• grunt server - Run both watch and connect tasks at the same time

Contributing and Feedback

Feel free to fork, file some issues or tweet your feedback to me.

Do check out these awesome contributions as well:

• Bookmarklet to switch between HackerNews and HackerWeb by duncansmart
• HNmobile Bookmarklet by neocoder
• Hacker News Menu Tab (GitHub) by Guilherme Defreitas

License

MIT.

Other similar apps

This is the not the first third-party app for Hacker News. Others have tried doing the same thing, despite some slight differences. I've compiled a list of apps here.

hackerweb's Issues

"About" panel visible on bottom of screen on large viewports.

Granted, I'm overriding the UA string to get and use the iOS theme on desktop rather than the "web" theme (where this doesn't happen, of course).

Maybe it's not worth looking too much into this one, but just wanted to let you know. :)

Long URLs breaking the layout

Long URLs in the stories list page break the layout, via https://twitter.com/coruble/status/463057554411900928

Implement Service Workers

Article: http://www.html5rocks.com/en/tutorials/service-worker/introduction/

Only supported in Chrome now, but seems promising. Especially now that HackerWeb is no longer using AppCache.

.

Full Screen?

Why not turn it into a fullscreen web app by removing the bar at the bottom. I think it will feel nicer with more screen real-estate.

Switch to the official Hacker News API before October 28th

The Official Hacker News API was just announced, along with an announcement of new markup to be launched in three weeks:

Most importantly, the reason we released an API is so that we can start modernizing the markup on Hacker News. Because there are a lot of apps and projects out there that rely on scraping the site to access the data inside it, we decided it would be best to release a proper API and give everyone time to convert their code before we launch any new HTML.

This change will most certainly break the unofficial Hacker News API, so it's paramount (in keeping a constant stream of HN to my iPhone) that hackerweb is updated to use the new API.

Direct link to content in left pane

The older (single pane) version of hnmobile used to open links by default. And it offered a second link to the comments. I'd like that sort of behavior in the new version.

Possible ideas:

1. Same as previous version. Title links to content. "n comments" links to comments
2. Create a small url icon/text which links to the content.
3. Offer a forced way to visit the iphone version

Opening the comments first feels weird, because as a reader I have no context for the comments.

Find on the page broken on IOS8 Safari

When I open the comments and search for a keyword, it doesn't scroll to that keyword.

Icon for Add to Home

The app doesn't look good when you add it to the home screen of an iPhone, you should add an icon.

http://vjarmy.com/archives/2008/01/howto_iphone_webclip_icons.php

[Enhancement] Email to friends

Add an "email to friends" button for articles with predefined subject and contents :o) The link in this email should reference the HN website, not the mobile app

Add keyboard navigation

I think it would be convenient to be able to use the keyboard to navigate through posts.

Upgrade design to iOS7

Use hackerwebapp.com domain for the app?

It'd be nice if the actual web app lived on hackerwebapp.com

Filter Content (Ask, Show, New)

Hello,
Is it possible to be able to filter the content by Ask/Show/New/others?

Thanks.

(Best HN viewer out there IMO!)

Upvote a post

Is it possible to upvote a post? If not, consider this a feature request 😃

Clicks happen on wrong story

When using hackerweb in Firefox OS, clicks will often go to the story above where you clicked on, usually after scrolling

Stop supporting IE9

Currently index.html contains <!--[if lt IE 9]>. It's time to switch minimum support to IE10. By removing support for IE9, Finally can remove the classlist polyfill. Support table here: http://caniuse.com/#feat=classlist

service-worker.js should ignore requests where URL has chrome-extension scheme:

I think service-worker.js should ignore requests where the URL has chrome-extension scheme. Otherwise this error might happen:

service-worker.js:19 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported

To reproduce, you may need to install this Chrome extension: https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle?hl=en

Unnecessary calls to hw.news.render().

hw.news.render() is called for routes that don't display the news list, like https://hackerweb.app/#/about, or a specific news item.

This may result in unnecessary calls to the HN API. It also caused other problems in my fork.

I fixed it in my fork by moving the call like this: Leftium@4845c1a

Pull to refresh

I don't know anything about the library used on this project, but it would be nice to get the pull to refresh idiom going on this web app. I know it's possible in the Mobile Safari browser (Gmail has a nice implementation for it). If its possible with these libraries, I'll happily get going on putting it in place if there's interest in the feature.

Buttons in bottom break on iPad with new landscape design

Screenshot

Fix empty pages for dead stories

When a story is dead, details page show nothing. Should at least notify user that the story is dead. E.g.: http://cheeaun.github.com/hackerweb/#/item/4977608

remove cloudflare

using cloudflare is hostile to users using tor, valueing privacy and cloudflare is doing shit to improve the situation.

please use another method or service which works properly. dump cloudflare.

Merge ipad ui into desktop ui

This project is great ;-).

Their is only one thing that bothers me: the ipad ui is great and I don't get why it's not used for desktop. The 2 columns with a list pane on the left is perfect on desktop too.

Don't you think so?
Thanks.

ps. and it works as is (tested with chrome ipad simulator — it just needs to handle mouse click besides touches)

[Firefox] Brief flash of white

When navigating to hackerweb, there's a brief but very noticable flash of white on Firefox desktop & mobile. Maybe background-color could be set earlier?

Implement better navigation bar layout

Follow some of the experiments done here: http://keeplook.in/on-fixing-hackerwebs-navigation-bar-and-web-apps-in-general/

Expanding comment resets scroll to top

Expanding a comment resets scroll to top, and you lose your place.

BTW I freaking love this app. Amazing, kudos and my thanks.

Load more than 60 posts

Currently, when you click the "more" link, the 30 more posts that load don’t come with another "more" link, so the max number of posts is 60. Was this intentional, or could this potentially be expanded?

Google Frame is deprecated...

Hi,

the app suggest to upgrade the browser or install google frame, however this one is shutting down :)

what about update the message for those lt IE 9 ?

Outdated content

Hello,

Starting a few weeks ago, I noticed I am seeing stale content when using this web app. For instance, the top story today is the telegram getting 1M whatsapp users and it says "2 hours ago" even though the story is a few days old. I've tried pulling down, hitting the refresh button, and reloading the page in chrome.

If it helps...
Chrome
iPhone 5
Using wireless data, not wifi

Dark mode feature request

A dark mode would be nice for when reading at night 😄

Keep previous focus when back.

Always scroll to top when back from link or comments view.

Highlight OP in the comments thread

Use a different look for comments made by the original poster

iPhone SE (2020) defaults to 'web' theme.

The iPhone SE (2020) defaults to the 'web' theme (only) on https://hackerweb.app.

For some reason the iPhone gives a different user agent for https://hackerweb.app:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15

The same device/browser gives the expected user agent for other domains like https://hackerweb.leftium.com:
Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

So the userAgent check is failing to detect the iPhone. I'm not sure if something can be changed on the server side or in the detection code to solve this. Maybe it's just a weird Safari bug, but I'm not sure why it only happens on https://hackerweb.app. https://hackerweb.leftium.com is simply a clone of https://github.com/cheeaun/hackerweb hosted on Netlify.

Interestingly, the 'web' theme on an iOS device actually works better in some ways:

• The address bar is hidden into "minimal" UI mode.
• Downside: the "More..." button must be tapped very carefully, otherwise the tap is eaten by the hidden browser bottom menu (causing the browser to leave minimal UI mode and show the full address bar, again.)

Only display 30 entries now?

Seems starting a couple days ago it will only display 30 instead of 60 entries at a time, is something changed?

Fix deep threaded comments

Some comment threads got too deep, layout falls apart. E.g.: http://cheeaun.github.com/hackerweb/#/item/5450691

Double tapping title bar breaks overflow scrolling

Just noticed if I double-tap the title bar, overscroll breaks after the list scrolls to top.

P.S - this is on iPhone Safari iOS 6.0.1

Make sticky header clickable

Tiny little improvement that would (at least for me) make this even more awesome: when on mobile make the sticky header at the top clickable to open the link in a new window. Often I read the comments and then decide that I would actually like to read the linked article etc. I then have to scroll all the way up to the header. If I could instead just click the sticky heading at the top, then this would save me at least 1 second a day (rough estimate, maybe 0.5 seconds. Writing this issue stole me enough seconds for the year but hopefully others will benefit...).

No comments on iOS Safari sometimes

About 40% of the time when I load hackerweb in Safari, the comments don't load:

or show as "Loading...":

Though they're definitely there:

Clicking "More..." link at bottom sometimes loads last article on the list

If you click the "More..." link at the bottom of the list, sometimes it will load the last item in the list instead of loading more items.

I couldn't reproduce it very consistently but it seemed to happen frequently when I tried it on a totally fresh page load.

Address bar doesn't hide in iOS7

This isn't a huge issue but I thought I would at least let you know about it. On the new iOS7 beta, the address bar doesn't snap up on load, and when scrolling the bottom nav bar doesn't hide.

Cheers and thanks for making this, it was a huge inspiration!